學習日誌16-event(事件)2

11th鐵人賽

古德瑞

2019-10-01 22:53:33

1001 瀏覽

分享至

Event Bubbling與Event Capturing差異

addEventListener事件監聽裡寫法有三個參數，分別是選擇事件、帶入function、true或false。
第三個是預設false，也就是監聽的方式:

flase => Event Bubbling 事件氣泡 : 從指定元素往外找
true => Event Capturing 事件捕捉 : 從最外面找到指定元素

//HTML
<body class="body">
    <div class="box"></div>
</body>

//Javascript
var el = document.querySelector('.box');
el.addEventListener('click',function(){
  alert('box');
},false);

var elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
  alert('body');
},false);

Event Bubbling 事件氣泡

預設為false，氣泡就是由裡面慢慢往外跑出來，從指定元素的部分一層層往外往上走，
如圖例:如果點選 div.box，則會先彈出 box(最近)，在彈出 body(最外層)

Event Capturing 事件捕捉

如果參數改成true，則從最外層開始往下找，往內捕捉。
如圖例:如果點選 div.box，則會先彈出 body(最外層)，在彈出 box(最近)

stoppropagation與preventDefault

stoppropagation => 中止冒泡，取消事件繼續往下傳遞
preventDefault => 取消瀏覽器的預設行為。

stoppropagation 中止冒泡

使用時機可用在元素與元素重疊的情況

//HTML
<body class="body">
    <div class="box"></div>
</body>

//Javascript
var el = document.querySelector('.box');
el.addEventListener('click',function(e){
  e.stopPropagation();
  alert('box');
},false);
var elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
  alert('你沒有執行中止冒泡');
},false);

在前面第一個監聽式加入`e.stopPropagation();，原本會執行第二個監聽事件就會被中止。

preventDefault 取消瀏覽器的預設行為

常用在取消 a 連結的默認行為。

//HTML
<body>
    <a href="#" class="linktest">TEST</a>
</body>

//Javascript
var el = document.querySelector('.linktest');
el.addEventListener('click',function(e){
  e.preventDefault();
  alert('linktest');
},false);